<template>
  <div>
    <el-tabs stretch :style="[{fontSize:`{16}px`}]" @tab-click="tabClick">
      <el-tab-pane
        v-for="item in paneList"
        :key="item.id"
        @input="change($event)"
        :label="item.label">
        <slot :name="item.id"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'TabHelper',
  props: {
    paneList: Array
  },
  data() {
    return {
      index: 0
    }
  },
  methods: {
    change(e) {
      this.$forceUpdate()
    },
    tabClick(e) {
      this.index = e.index
      console.log(this.index)
      this.$emit("tabIndex", this.index)

    }
  }
}
</script>

<style lang="less" scoped>
.el-tab-pane {
  width: 600px;

}

/deep/ .el-tabs__item {
  /* 修改为您想要的文字大小 */

  font-size: 16px !important;
}

</style>
